<template>
	<view>
		<view class="my-userinfo-container">
			<!-- 头像昵称区域 -->
			<view class="top-box">
				<image :src="userinfo.avatarUrl" class="userAvatar"></image>
				<view class="userNickname">{{userinfo.nickName}}</view>
			</view>
			<uni-section title="系统设置" type="line">
				<uni-list>
					<picker @change="reviewNumPickerChange" :value="index" :range="array">
						<uni-list-item showArrow title="每组复习数量" @click="reviewNumPickerChange">
							<template v-slot:footer>
								<view class="review-num">{{array[index]}}</view>
							</template>
						</uni-list-item>
					</picker>
					<uni-list-item clickable title="清除用户数据" @click="deleteUserData"></uni-list-item>
				</uni-list>
			</uni-section>
			<uni-section title="学习情况" type="line">
				<uni-list>
					<uni-list-item title="学习计划中的单词量">
						<template v-slot:footer>
							<view class="voc-num">{{planVoc}}</view>
						</template>
					</uni-list-item>
					<uni-list-item title="平均每天新学单词量">
						<template v-slot:footer>
							<view class="voc-num">{{averageDayNewLearnVoc}}</view>
						</template>
					</uni-list-item>
					<uni-list-item title="平均每天复习单词量">
						<template v-slot:footer>
							<view class="voc-num">{{averageDayReviewVoc}}</view>
						</template>
					</uni-list-item>
				</uni-list>
			</uni-section>
		</view>
	</view>
</template>

<script>
	// 按需导入 mapState 辅助函数
	import {
		mapState,
		mapMutations
	} from 'vuex'

	export default {
		computed: {
			// 将 m_user 模块中的 userinfo 映射到当前页面中使用
			...mapState('user', ['userinfo']),
		},
		data() {
			return {
				array: ['10', '15', '20', '25'],
				index: 0,
				averageDayReviewVoc:0,
				planVoc:0,
				averageDayNewLearnVoc:0
			}
		},
		methods: {
			...mapMutations('user',['updatesetOfWordsCount']),
			reviewNumPickerChange(e) {
				this.index = e.detail.value
				this.updatesetOfWordsCount(array[this.index])
			},
			deleteUserData() {

			}
		}
	}
</script>

<style lang="scss">
	.my-userinfo-container {
		height: 100%;
		// 为整个组件的结构添加浅灰色的背景
		background-color: #f4f4f4;

		.top-box {
			height: 400rpx;
			background-color: #00aaff;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;

			.userAvatar {
				display: block;
				width: 90px;
				height: 90px;
				border-radius: 45px;
				border: 2px solid white;
				box-shadow: 0 1px 5px black;
			}

			.userNickname {
				color: white;
				font-weight: bold;
				font-size: 16px;
				margin-top: 10px;
			}
		}

		.voc-num {
			background: #3ec87e;
			color: white;
			width: 70px;
			margin-right: 15px;
			padding: 2px 0;
			text-align: center;
			border-radius: 5px;
		}
	}
</style>
